{{define "demo/form/autocomplete"}}
<!DOCTYPE html>
<html lang="zh">
<head>
    {{template "header" (OssUrl)}}
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content  ">
    <div class="row">
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>搜索自动补全<small>https://github.com/lzwme/bootstrap-suggest-plugin</small></h5>
                </div>
                <div class="ibox-content">
                    <p>展示下拉菜单按钮。</p>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="input-group">
                                <input type="text" class="form-control" id="suggest-demo-1">
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <p>不展示下拉菜单按钮。</p>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="input-group">
                                <input type="text" class="form-control" id="suggest-demo-2">
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <p>前端json中获取数据</p>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="input-group">
                                <input type="text" class="form-control" id="suggest-demo-3">
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                    </ul>
                                </div>
                                <!-- /btn-group -->
                            </div>
                        </div>
                    </div>

                    <h3>百度搜索</h3>
                    <p>支持逗号分隔多关键字</p>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="input-group" style="width: 300px;">
                                <input type="text" class="form-control" id="baidu">
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                    </ul>
                                </div>
                                <!-- /btn-group -->
                            </div>
                        </div>
                    </div>

                    <h3>淘宝搜索</h3>
                    <p>支持逗号分隔多关键字</p>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="input-group" style="width: 400px;">
                                <input type="text" class="form-control" id="taobao">
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                    </ul>
                                </div>
                                <!-- /btn-group -->
                            </div>
                        </div>
                    </div>
                    <hr>
                </div>
            </div>
        </div>

        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>搜索自动补全<small>https://github.com/bassjobsen/Bootstrap-3-Typeahead</small></h5>
                </div>
                <div class="ibox-content">
                    <p>通过数据属性的基本示例。</p>
                    <div class="row">
                        <div class="col-lg-6">
                            <input type="text" placeholder="YunjieGo..." data-provide="typeahead"
                                   data-source='["YunjieGo 1","YunjieGo 2","YunjieGo 3"]' class="form-control"/>
                        </div>
                    </div>
                    <hr>

                    <p>通过javascript的基本示例。</p>
                    <div class="row">
                        <div class="col-lg-6">
                            <input type="text" placeholder="YunjieGo..." class="form-control" id="typeahead-demo-1"/>
                        </div>
                    </div>

                    <hr>
                    <p>通过javascript的复杂示例。</p>
                    <div class="row">
                        <div class="col-lg-6">
                            <input type="text" placeholder="YunjieGo..." class="form-control" id="typeahead-demo-2"/>
                        </div>
                    </div>

                    <hr>
                    <p>后台url中获取简单数据</p>
                    <div class="row">
                        <div class="col-lg-6">
                            <input type="text" placeholder="YunjieGo..." class="form-control" id="typeahead-demo-3"/>
                        </div>
                    </div>

                    <hr>
                </div>
            </div>
        </div>
    </div>
</div>
{{template "footer" (OssUrl)}}
<script src="{{OssUrl}}/resource/ajax/libs/suggest/bootstrap-suggest.min.js"></script>
<script src="{{OssUrl}}/resource/ajax/libs/typeahead/bootstrap3-typeahead.min.js"></script>
<script type="text/javascript">

    var testBsSuggest = $("#suggest-demo-1").bsSuggest({
        url: ctx + "/demo/form/userModel",
        idField: "userId",
        keyField: "userName"
    }).on('onDataRequestSuccess', function (e, result) {
        console.log('onDataRequestSuccess: ', result);
    }).on('onSetSelectValue', function (e, keyword) {
        console.log('onSetSelectValue: ', keyword);
    }).on('onUnsetSelectValue', function (e) {
        console.log("onUnsetSelectValue");
    });

    var testBsSuggest = $("#suggest-demo-2").bsSuggest({
        url: ctx + "/demo/form/userModel",
        showBtn: false,
        idField: "userId",
        keyField: "userName"
    }).on('onDataRequestSuccess', function (e, result) {
        console.log('onDataRequestSuccess: ', result);
    }).on('onSetSelectValue', function (e, keyword) {
        console.log('onSetSelectValue: ', keyword);
    }).on('onUnsetSelectValue', function (e) {
        console.log("onUnsetSelectValue");
    });

    //data 数据中获取
    var testdataBsSuggest = $("#suggest-demo-3").bsSuggest({
        indexId: 1,
        indexKey: 2,
        data: {
            'value': [
                {
                    'userId': '1',
                    'userCode': '1000001',
                    'userName': '测试1',
                    'userPhone': '15888888888'
                },
                {
                    'userId': '2',
                    'userCode': '1000002',
                    'userName': '测试2',
                    'userPhone': '15888888888'
                },
                {
                    'userId': '3',
                    'userCode': '1000003',
                    'userName': '测试3',
                    'userPhone': '15888888888'
                },
                {
                    'userId': '4',
                    'userCode': '1000004',
                    'userName': '测试4',
                    'userPhone': '15888888888'
                },
                {
                    'userId': '5',
                    'userCode': '1000005',
                    'userName': '测试5',
                    'userPhone': '15888888888'
                }
            ],
            'defaults': 'http://demo.yunjie.info'
        }
    });

    //百度搜索测试
    var baiduBsSuggest = $("#baidu").bsSuggest({
        allowNoKeyword: false, //是否允许无关键字时请求数据
        multiWord: true, //以分隔符号分割的多关键字支持
        separator: ",", //多关键字支持时的分隔符，默认为空格
        getDataMethod: "url", //获取数据的方式，总是从 URL 获取
        url: 'http://unionsug.baidu.com/su?p=3&t=' + (new Date()).getTime() + '&wd=',
        /*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*/
        jsonp: 'cb',
        /*如果从 url 获取数据，并且需要跨域，则该参数必须设置*/
        processData: function (json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数
            var i, len, data = {
                value: []
            };
            if (!json || !json.s || json.s.length === 0) {
                return false;
            }

            console.log(json);
            len = json.s.length;

            jsonStr = "{'value':[";
            for (i = 0; i < len; i++) {
                data.value.push({
                    word: json.s[i]
                });
            }
            data.defaults = 'baidu';

            //字符串转化为 js 对象
            return data;
        }
    });

    //淘宝搜索建议测试
    var taobaoBsSuggest = $("#taobao").bsSuggest({
        indexId: 2, //data.value 的第几个数据，作为input输入框的内容
        indexKey: 1, //data.value 的第几个数据，作为input输入框的内容
        allowNoKeyword: false, //是否允许无关键字时请求数据
        multiWord: true, //以分隔符号分割的多关键字支持
        separator: ",", //多关键字支持时的分隔符，默认为空格
        getDataMethod: "url", //获取数据的方式，总是从 URL 获取
        effectiveFieldsAlias: {
            Id: "序号",
            Keyword: "关键字",
            Count: "数量"
        },
        showHeader: true,
        url: 'http://suggest.taobao.com/sug?code=utf-8&extras=1&q=',
        /*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*/
        jsonp: 'callback',
        /*如果从 url 获取数据，并且需要跨域，则该参数必须设置*/
        processData: function (json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数
            var i, len, data = {
                value: []
            };

            if (!json || !json.result || json.result.length == 0) {
                return false;
            }

            console.log(json);
            len = json.result.length;

            for (i = 0; i < len; i++) {
                data.value.push({
                    "Id": (i + 1),
                    "Keyword": json.result[i][0],
                    "Count": json.result[i][1]
                });
            }
            console.log(data);
            return data;
        }
    });

    $('#typeahead-demo-1').typeahead({
        source: ["YunjieGo 1", "YunjieGo 2", "YunjieGo 3"]
    });

    $('#typeahead-demo-2').typeahead({
        source: [
            {"name": "Afghanistan", "code": "AF", "ccn0": "040"},
            {"name": "Land Islands", "code": "AX", "ccn0": "050"},
            {"name": "Albania", "code": "AL", "ccn0": "060"},
            {"name": "Algeria", "code": "DZ", "ccn0": "070"}
        ]
    });

    $.get(ctx + "/demo/form/collection", function (data) {
        $("#typeahead-demo-3").typeahead({
            source: data.value
        });
    }, 'json');
</script>
</body>
</html>
{{end}}